<c:choose>
    <c:when test="${cart.numberOfItems == 0 || cart == null}">
        <div class="jumbotron">
            <h1>Your cart is empty!</h1>

            <a href="index" class="btn btn-warning">
                <span class="glyphicon glyphicon-compressed"></span>
                Continue shopping
            </a>
        </div>
    </c:when>
    <c:otherwise>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Cart</h3>
                </div>
                <div class="panel-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th class="col-md-6">Product</th>
                                <th class="col-md-2">Unit price</th>
                                <th class="col-md-2">Quantity</th>
                                <th class="col-md-2">Total price</th>
                            </tr>
                        </thead>

                        <c:forEach var="cartItem" items="${cart.items}">
                            <c:set var="product" value="${cartItem.product}"/>
                            <c:set var="serie" value="${cartItem.serie}"/>
                            <tr>
                                <td class="col-md-6" >
                                    <div class="thumbnail col-md-2" style="margin-bottom: 0px;">
                                        <img src="<c:out value="${product.imgPath}"/>"/>
                                    </div>
                                    <div class="col-md-4">
                                        <c:out value="${serie.name}"/><br>
                                        Volume <c:out value="${product.volume}"/>
                                    </div>
                                </td>
                                <td class="col-md-2" >
                                        <c:out value="${product.price}"/> &euro;
                                </td>
                                <td class="col-md-2" >
                                    <form class="form-inline" action="cart" method="post">
                                        <input type="hidden" name="productId" value="${product.id}">
                                      
                                        <div class="form-group">
                                            <input class="form-control" type="text" maxlength="2" size="2" value="${cartItem.quantity}" name="quantity" >
                                        </div>
                                        <button type="submit" name="submit" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span></button>
                                    </form>                             
                                </td>
                                <td class="col-md-2" >
                                        <c:out value="${cartItem.total}"/> &euro;
                                </td>
                            </tr>
                        </c:forEach>
                            <tfoot>
                                <tr>
                                    <td class="col-md-6"></td>
                                    <td class="col-md-2"></td>
                                    <td class="col-md-2">
                                        <h4 class="text-info">Total price</h4>
                                    </td>
                                    <td class="col-md-2">
                                        <h5><c:out value="${cart.total}"/> &euro;</h5>
                                    </td>
                                </tr>
                            </tfoot>
                    </table>
                </div>
                <div class="panel-footer">
                    <div class="col-md-2">
                        <a href="cart?clear=true" class="btn btn-danger">
                            <span class="glyphicon glyphicon-trash"></span>
                            Clear
                        </a>
                    </div>
                    <div class="col-md-2 col-md-offset-6">

                        <a href="index" class="btn btn-warning">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                            Continue shopping
                        </a>
                    </div>
                    <div>
                        <%-- checkout widget --%>
                        <a href="checkout" class="btn btn-success">
                            <span class="glyphicon glyphicon-usd"></span>
                            Checkout
                        </a>
                    </div>
                </div>
        </div>
    </c:otherwise>
</c:choose> 